<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            width: 100%;
            height: 700px;
            margin-top: 0px;
            background: #008B8B;
            text-align: center;
        }

        div {
            display: inline-block;
            padding-top: 80px;
            padding-right: 20px;

        }

        h2 {
            font-family: "微软雅黑";
            font-size: 40px;
            color: black;
        }

        #log {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            student欢迎您！
        </h2>
        <p>
            用户名:<input type="text" class="username">
        </p>
        <p>
            密&emsp;码:<input type="password" class="psw">
            <!-- //注意：&emsp是全角空格符，占一个中文字的长度，加上可以保证用户名 和密码对齐，小伙伴可以试着 先不加这个运行一下看一下结果 -->
        </p>
        <p>
            <button class="btn">登录</button>
        </p>
        <p>
            还没有账号？<a href="注册.html">立即注册</a>
        </p>
    </div>
    <script src="../../../jquery.min.js"></script>
    <script>
        $(".btn").click(function () {
            let username = $(".username").val()
            let password = $(".psw").val()
            $.ajax({
                url: `http://10.35.165.39/log`,
                data: {
                    username: username,
                    password: password
                },
                success(data) {
                    console.log(data)
                    if (data === "success") {
                        alert("登陆成功")
                        window.location.href = "http://10.35.165.39/nameList.html"
                    } else {
                        alert("登录失败")
                    }
                }
            })
        })
    </script>
</body>

</html>